import React from 'react';
import { inject, observer } from 'mobx-react';
import ScrollArea from 'components/scrollArea';
import FrameContentRender from 'components/motionsRender/components/frameContentRender';
import Config from 'components/motionsRender/components/config';
import css from './index.less';

@inject('store')
@observer
class Main extends React.Component {

  constructor() {
    super();
    this.state = {
      scrollHeight: 700,
      topPosition: 0
    };
  }

  componentDidMount() {
    this.setState({
      scrollHeight: this.refs.box.offsetHeight
    });
  }

  renderInput(isInitial, frame) {
    if (isInitial) return null;
    return (
      <div style={{
        margin: '-10px auto',
        width: '400px'
      }}>
        <p>
          过渡时间(单位/ms):
          <input type="number" value={frame.duration} onChange={(e) => {
            frame.update('duration', parseInt(e.target.value));
          }}/>

        </p>
        <p>
          延迟时间(单位/ms):
          <input type="number" value={frame.delay} onChange={(e) => {
            frame.update('delay', parseInt(e.target.value));
          }}/>
        </p>
      </div>
    );
  }

  render() {
    const { temporaryMotions } = this.props.store.project.currentPages.current;
    const { current } = temporaryMotions.current; // 选中帧
    const isInitial = current === temporaryMotions.current.list[0]; // 初始帧，修改
    const { top, left } = this.props.store.simulator;

    return (
      <div className={css.layout} ref="box">
        <ScrollArea
          style={{
            height: `${this.state.scrollHeight}px`,
          }}
          onScroll={(newState) => {
            this.setState({
              topPosition: newState.topPosition
            });
          }}
        >
          <div>
            <div style={{height: '82px', paddingTop: '20px'}}>
              {
                this.renderInput(isInitial, current)
              }
            </div>
            <div className={css.pageContent} style={{
              left: `${left - 190}px`,
              top: `${top - 152}px`,
            }}>
              {
                // this.renderFrameContent()
              }
              <FrameContentRender frame={current} isInitial={isInitial} topPosition={this.state.topPosition}/>
              <div className={css.config}>
                <h5 className={css.title}>动画设置</h5>
                <Config frame={current}/>
              </div>
            </div>
          </div>

        </ScrollArea>

      </div>
    );
  }
}
export default Main;
